<!--首页-综合-->
<template>
    <div class="pageHome">
        <headerT title="商城" :isShowBack="false"/>
        <div class="pagesMain" style="height: 91vh;margin-top: 1.2rem;">
            <div class="homeTop">
                <dashboard :checkIndex="0"></dashboard>
                <div class="swiperInfo">
                    <swiper @on-index-change="onSwiperItemIndexChange" v-model="swiperItemIndex" :height="'5.7rem'" auto
                            :show-dots="false">
                        <swiper-item class="swiper-demo-img" v-for="(item, index) in swiperItems" :key="index">
                            <img :src="$tools.baseUrl() + '/'+ item.img" class="iconImg">
                        </swiper-item>
                    </swiper>
                </div>
                <div class="addMember">
                    <img src="../../../static/images/addMember.png" class="iconAddMember" alt=""/>
                </div>
            </div>

            <div class="homeMain">
                <div class="classify">
                    <div class="translateBlock classifyItem" v-for="item in goodsTypeLists" :keys="item.id"
                         @click="chooseTopNav(item)">
                        <img :src="item.type_img ? item.type_img : '../../../static/images/zbyl.png' " alt=""/>
                        <div>{{item.type_name}}</div>
                    </div>
                </div>

                <div class="chooseArea">
                    <div class="chooseText">选择区域</div>
                    <!--<img src="../../../static/images/address.png" class="chooseImg" alt=""/>-->
                    <div class="address">
                        <div class="translateBlock" style="width: 3rem;vertical-align: top;">
                            <div class="leftArea backgroundInfo" @click="chooseArea('北碚区')">
                                北碚区
                            </div>
                            <div class="leftArea backgroundInfo" @click="chooseArea('璧山区')">
                                璧山区
                            </div>
                            <div class="leftArea backgroundInfo" @click="chooseArea('沙坪坝区')">
                                沙坪坝区
                            </div>
                            <div class="leftArea backgroundInfo" @click="chooseArea('九龙坡区')">
                                九龙坡
                            </div>
                        </div>
                        <div class="translateBlock rightArea" style="">
                            <div class="top backgroundInfo" @click="chooseArea('渝北区')">
                                渝北区
                            </div>
                            <div style="width: 100%;">
                                <div class=" translateBlock backgroundInfo middleLeft" @click="chooseArea('渝中区')">
                                    渝中区
                                </div>
                                <div class=" translateBlock middleRight">
                                    <div class="backgroundInfo middleRightItem" @click="chooseArea('江北区')">江北区</div>
                                    <div class="backgroundInfo middleRightItem" @click="chooseArea('南岸区')">南岸区</div>
                                </div>
                            </div>
                            <div class="bottom">
                                <div class="bottomLeft translateBlock backgroundInfo" @click="chooseArea('巴南区')">巴南区
                                </div>
                                <div class="bottomRight translateBlock backgroundInfo" @click="chooseArea('涪陵区')">涪陵区
                                </div>
                            </div>
                        </div>

                        <div class="abosulteArea" @click="chooseArea('大渡口区')">
                            <img src="../../../static/images/wz.png" width="20" alt=""/>
                            <div>大渡口</div>
                        </div>

                    </div>
                </div>

                <div class="goods">
                    <div class="goodsTab">
                        <div class="translateBlock tab" :class="goodsInfoType === 2 ? 'checkTab' : 'checkTabNo'"
                             @click="chooseGoodsType(2)">最新上架
                        </div>
                        <div class="translateBlock" :class="goodsInfoType === 3 ? 'checkTab' : 'checkTabNo'"
                             @click="chooseGoodsType(3)">即将下架
                        </div>
                    </div>
                    <div class="timeBlock">
                        <div class="timeText translateBlock">结束时间</div>
                        <div class="time translateBlock">
                            <span class="mainBgColor timeColor">{{day_span}}</span>
                            <span>天</span>
                            <span class="mainBgColor timeColor">{{hour_spna}}</span>
                            <span>:</span>
                            <span class="mainBgColor timeColor">{{minute_span}}</span>
                            <span>:</span>
                            <span class="mainBgColor timeColor">{{second_span}}</span>
                        </div>
                    </div>
                    <div class="goodsList">
                        <div class="goodsItem comBorderBottom" v-for="(item,index) in goodsList.data" :keys="index">
                            <div class="translateBlock">
                                <img :src="item.good_img[0].img_url" class="goodsPic" alt=""/>
                            </div>
                            <div class="translateBlock goodsInfo">
                                <div class="goodsName moreTextEllipsis">
                                    {{item.goods_title}}
                                </div>
                                <div class="translateBlock">
                                    <div class="sales">
                                        <span>销量：{{item.sales_volume}}</span>
                                        <span>|</span>
                                        <span>距离：{{item.distance |transformDistance}}</span>
                                    </div>
                                    <div class="price">
                                        <div class="discount translateBlock mainColor">
                                            <span>¥</span>
                                            <span></span>
                                            <span v-if="item.good_marketing && item.good_marketing.promotion_price">
                                                {{item.good_marketing.promotion_price}}
                                            </span>
                                            <span v-else>{{item.good_specification[0].price}}</span>
                                        </div>
                                        <div class="originalPrice translateBlock">
                                            ¥{{item.good_specification[0].original_price}}
                                        </div>
                                    </div>
                                </div>
                                <div class="translateBlock btnBlock">
                                    <div class="btn btnBuy"
                                         @click="$tools.goPage_query('goodsDetails',{goods_id:item.id})">购买
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="btnShare">
            <img src="../../../static/images/close.png" class="iconShare" @click="generateUrl()" alt=""/>
        </div>

        <tabcard/>

        <!--分享-->
        <div v-transfer-dom style="z-index: 1002">
            <popup v-model="isShowSharepopup" position="bottom" max-height="50%" class="shareHomeInfo">
                <div class="shareItems">
                    <div class="translateBlock item" @click="testCopy()">
                        <img src="../../../static/images/icon-share1.png" class="iconShare vMiddle" alt=""/>
                        <div>分享链接</div>
                    </div>
                    <div class="translateBlock item" @click="getGeneratePoster()">
                        <img src="../../../static/images/icon-share2.png" class="iconShare vMiddle" alt=""/>
                        <div>生成海报</div>
                    </div>
                    <div class="translateBlock item" @click="shareToFriend()">
                        <img src="../../../static/images/icon-share3.png" class="iconShare vMiddle" alt=""/>
                        <div>分享给好友</div>
                    </div>

                </div>
                <div class="popupBottom" @click="isShowSharepopup = false">
                    取消
                </div>
            </popup>
        </div>

        <!--生成海报-->
        <div v-transfer-dom>
            <x-dialog v-model="isShowPosterDialog" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%',
            height: '50%', 'background-color': 'transparent'}" class="posterDialog">
                <div style="width: 7.5rem;text-align: right;margin:0 auto;">
                    <x-icon type="ios-close-outline" style="fill:#fff;width: 1rem;height:1rem;"
                            @click="isShowPosterDialog = false"></x-icon>
                </div>
                <div class="posterBlock">
                    <div class="logo">
                        <img v-if="posterInfo" :src="posterInfo.share_img" alt="" class="iconLogo"/>
                    </div>
                    <div class="qrcodeBlock">
                        <div class="qrcode translateBlock">
                            <img v-if="posterInfo" :src="posterInfo.user_qr_code" class="iconQrcode"
                                 alt=""/>
                        </div>
                        <div class="text translateBlock" v-if="posterInfo">
                            <div class="title">{{posterInfo.share_title}}</div>
                            <div class="subTitle">{{posterInfo.share_name}}</div>
                        </div>
                    </div>
                </div>
            </x-dialog>
        </div>
    </div>
</template>

<script>
    import tabcard from '@/components/tabCard'
    import dashboard from '@/components/dashboard'
    import {Swiper, SwiperItem, Popup, TransferDom, XDialog} from 'vux'
    import {getToken} from '../../services/login'
    import {getIndexInfo, goodsTypeList, bannerList, nineAreaList, generatePoster} from '../../services/home'
    import uploadPicture from '@/components/uploadPicture'

    export default {
        name: 'login',
        directives: {
            TransferDom
        },
        components: {
            tabcard,
            Swiper,
            SwiperItem,
            dashboard,
            uploadPicture,
            Popup,
            XDialog,
        },

        data() {
            return {
                results: [],
                swiperItemIndex: 1,  // 轮播下表
                swiperItems: [],     // 轮播数据
                longitude: this.$tools.getStorageParam('localStorage', 'longitude'),     // 经度
                dimensionality: this.$tools.getStorageParam('localStorage', 'dimensionality'),  // 纬度
                goodsInfoType: 2,        // 商品上架类型 1.上下架 2.最新上架 3.即将下架
                goodsTypeLists: [],      // 商品类型，精致生活,生鲜水果....
                bannerLists: [],   // 轮播图
                nineAreaLists: [],   // 主城九区
                endTime: '',   // 结束时间
                goodsList: [],
                goodsType: 1,
                day_span: '',
                hour_spna: '',
                minute_span: '',
                second_span: '',
                isShowSharepopup: false,   // 分享弹窗
                isShowPosterDialog: false,    // 生成海报的弹窗
                posterInfo: null,   // 海报信息
            }
        },

        watch: {},
        computed: {},

        created() {
            // this.getTestToken()
        },
        mounted() {
            this.getInfo();
            this.getBannerList();
            this.getGoodsTypeList();
            this.getNineAreaList();
        },
        methods: {

            // 获取token
            getTestToken() {
                let param = {
                    id: '1',
                }
                this.$post(getToken, param).then(res => {
                    this.$store.dispatch('changeToken', res.data.token)
                    this.getInfo();
                    this.getBannerList();
                    this.getGoodsTypeList();
                    this.getNineAreaList();
                })
            },

            // 切换上下架类型
            chooseGoodsType(type) {
                this.goodsInfoType = type;
                this.getInfo()
            },

            // 获取首页最下方商品数据
            getInfo() {
                let param = {
                    longitude: this.longitude,
                    dimensionality: this.dimensionality,
                    type: this.goodsInfoType,
                }
                this.$post(getIndexInfo, param).then(res => {
                    this.goodsList = res.filtration_good_info;
                    if (res.filtration_good_info.data) {
                        let _time = res.filtration_good_info.data[0].good_pattern_time;
                        let _time1 = this.$tools.changeTimeToNumber(_time);
                        this.computedTime(_time1)
                    }
                })
            },

            // 获取轮播图
            getBannerList() {
                this.$post(bannerList, {}).then(res => {
                    this.swiperItems = res.data;
                })
            },

            // 获取商品类型
            getGoodsTypeList() {
                let param = {
                    type: this.goodsType,
                }
                this.$post(goodsTypeList, param).then(res => {
                    this.goodsTypeLists = res.data;
                })
            },

            // 获取地区列表
            getNineAreaList() {
                this.$post(nineAreaList, {}).then(res => {
                    this.nineAreaLists = res.data;
                })
            },

            // 选择美食餐饮，丽人娱乐等进行跳转
            chooseTopNav(item) {
                this.$store.dispatch('changeChooseTab', 999)
                this.$store.dispatch('changeChooseTabName', '')
                window.sessionStorage.setItem('checkIndex', 5)
                this.$tools.goPage_query('burst', {id: item.id, name: item.type_name})
            },

            // 选择区域
            chooseArea(param) {
                for (let i in  this.nineAreaLists) {
                    let item = this.nineAreaLists[i]
                    if (param === item.area_name) {
                        this.$store.dispatch('changeNineListIndex', Number(i));
                        this.$store.dispatch('changeChooseTab', 1)
                        window.sessionStorage.setItem('checkIndex', 5)
                        this.$tools.goPage('/burst')
                        break;
                    }
                }

            },

            // 复制链接url
            testCopy() {
                let _url = `${this.posterInfo.share_url}`
                let save = function (e) {
                    e.clipboardData.setData("text/plain", _url);
                    e.preventDefault()
                }
                document.addEventListener('copy', save);
                document.execCommand("copy")
                console.log(this.posterInfo.share_url, 2222)
                this.$vux.toast.text("链接已成功将链接复制到粘贴板！", "top");
            },

            // 轮播图片切换
            onSwiperItemIndexChange(ref) {
                // console.log(ref)
            },

            // 生成海报
            getGeneratePoster() {
                this.isShowSharepopup = false;
                this.isShowPosterDialog = true;
            },

            // 生成分享链接
            generateUrl() {
                this.isShowSharepopup = true;
                this.$post(generatePoster, {}).then(res => {
                    this.posterInfo = res.data;
                })
            },

            // 分享给好友
            shareToFriend() {
                console.log('分享给朋友')
                this.$wx.ShareAppMessage(this.posterInfo.share_title, this.posterInfo.share_name, this.posterInfo.share_url, this.posterInfo.share_img, this.shareCallback('"分享成功！"'), this.shareCallback('"您已取消分享！"'),)

            },

            shareCallback(param) {
                this.$vux.toast.text(param, "top");
            },

            // 获取到时间并倒数
            computedTime(second) {
                let _that = this;
                let countdown = second;
                let day = 24 * 60 * 60; //一天秒数
                let hour = 60 * 60; //一小时秒数
                let minute = 60; //分钟
                let _day_span = 0;
                let _hour_spna = 0;
                let _second_span = 0;
                let _minute_span = 0;
                let refreshcode;
                let refreshcode_time;

                refreshcode = setInterval(function () {
                    let span = "";
                    if (countdown > day) {
                        _day_span = Math.floor(countdown / day);
                        span = _day_span + "天";
                        _that.day_span = _day_span;
                    }
                    if (countdown > hour) {
                        _hour_spna = Math.floor((countdown - _day_span * day) / hour);
                        let h = _hour_spna + "小时";
                        _that.hour_spna = _hour_spna > 9 ? _hour_spna : '0' + _hour_spna;
                        span += h;
                    }
                    if (countdown > minute) {
                        _minute_span = Math.floor((countdown - _day_span * day - _hour_spna * hour) / minute);
                        let h = _minute_span + "分";
                        _that.minute_span = _minute_span > 9 ? _minute_span : '0' + _minute_span;
                        span += h;
                    }
                    if (countdown > 0) {
                        _second_span = countdown - _day_span * day - _hour_spna * hour - _minute_span * minute;
                        let s = _second_span + "秒";
                        _that.second_span = _second_span > 9 ? _second_span : '0' + _second_span;
                        span += s;
                    }
                    refreshcode_time = span;
                    _that.endTime = refreshcode_time;

                    if (countdown == '0秒') {
                        _that.endTime = "";
                        clearInterval(refreshcode)
                        return;
                    } else {
                        countdown--;
                    }

                }, 1000);

            },

        },
        filters: {
            transformDistance(distance) {
                return distance.toFixed(2)
            },
        },
    }
</script>

<style lang="less" rel="stylesheet/less" type="text/less">
    .pageHome {
        .homeTop {
            .swiperInfo {
                margin: -7rem .25rem 0 .25rem;

                .iconImg {
                    width: 100%;
                    height: 5rem;
                }
            }

            .addMember {
                background: #F8F8F8;
                border-radius: 1rem;
                padding: 0.3rem 0.12rem 0rem 0.52rem;

                .iconAddMember {
                    width: 8rem;
                }
            }
        }

        .btnShare {
            position: absolute;
            right: 0;
            bottom: 4rem;

            .iconShare {
                width: 1.65rem;
            }
        }

        .homeMain {
            color: #4e4e4e;
            padding: 0.5rem 0.3rem 0 0.3rem;

            .classify {
                padding: 0.3rem 0 1rem 0;

                .classifyItem {
                    width: 2.27rem;
                    text-align: center;
                    font-size: .3rem;
                }
            }

            .chooseArea {
                .chooseText {
                    font-size: .44rem;
                }

                .chooseImg {
                    width: 100%;
                }

                .address {
                    position: relative;
                    color: #807E7E;
                    font-size: 0.34rem;
                    background-color: #ffeeea;

                    .backgroundInfo {
                        background: url('../../../static/images/wz.png') no-repeat left;
                        background-size: 20px;
                    }

                    .leftArea {
                        background-position: 25%;
                        line-height: 1.5rem;
                        border-right: 3px solid #fff;
                        border-bottom: 3px solid #fff;
                        padding-left: 42%;
                    }

                    .leftArea:nth-child(3) {
                        line-height: 2rem;
                    }

                    .leftArea:last-child {
                        background-position: 25% 25%;
                        line-height: 3rem;
                        padding-left: 15%;
                    }

                    .rightArea {
                        width: 6.3rem;

                        .top {
                            line-height: 1.5rem;
                            background-position: 40%;
                            padding-left: 48%;
                            border-bottom: 3px solid #fff;
                        }

                        .middleLeft {
                            width: 2.06rem;
                            line-height: 3rem;
                            vertical-align: top;
                            background-position: 40% 25%;
                            border-right: 3px solid #fff;
                            border-bottom: 3px solid #fff;
                            padding-left: 5%;
                        }

                        .middleRight {
                            width: 4.22rem;
                            line-height: 1.45rem;
                            margin-left: -0.1rem;

                            .middleRightItem {
                                background-position: 30%;
                                border-bottom: 3px solid #fff;
                                padding-left: 44%;
                            }
                        }

                        .bottom {
                            height: 3.6rem;
                            line-height: 3.6rem;

                            .bottomLeft {
                                width: 3.4rem;
                                vertical-align: top;
                                background-position: 60% 30%;
                                border-right: 3px solid #fff;
                                padding-left: 25%;
                            }

                            .bottomRight {
                                width: 1.5rem;
                                background-position: 40% 30%;
                                padding-left: 4%;
                            }
                        }
                    }

                    .abosulteArea {
                        position: absolute;
                        top: 6rem;
                        left: 1.8rem;
                        width: 2.3rem;
                        height: 2.3rem;
                        z-index: 500;
                        background-color: #FFEEEA;
                        border: 3px solid #fff;
                        text-align: center;
                        padding-top: .4rem;
                    }
                }
            }

            .goods {
                /*background-color: #ccc;*/
                margin-top: .5rem;

                .goodsTab {
                    .tab {
                        margin-right: .5rem;
                    }

                    .checkTab {
                        font-size: .44rem;
                        color: #F64135;
                    }

                    .checkTabNo {
                        color: #4E4E4E;
                        font-size: .37rem;
                    }
                }

                .timeBlock {
                    padding: .7rem 0 0.5rem 0;

                    .timeText {
                        font-size: .34rem;
                        text-align: left;
                    }

                    .time {
                        color: #222;
                        width: 7.6rem;
                        text-align: right;

                        .timeColor {
                            color: #fff;
                            padding: 1px 3px;
                        }
                    }
                }

                .goodsList {
                    .goodsItem {
                        margin-bottom: 0.3rem;
                        padding-bottom: 0.1rem;

                        .goodsPic {
                            width: 2.88rem;
                        }

                        .goodsInfo {
                            width: 6.1rem;
                            height: 1.98rem;
                            vertical-align: top;
                            font-size: .34rem;
                            color: #4e4e4e;
                            margin-left: 0.3rem;
                        }

                        .goodsName {
                            -webkit-line-clamp: 2
                        }

                        .sales {
                            color: #9F9F9F;
                            font-size: .3rem;
                        }

                        .discount {
                            font-size: .44rem;
                            margin-right: .17rem;
                        }

                        .originalPrice {
                            color: #9F9F9F;
                            font-size: .25rem;
                            text-decoration: line-through;
                        }

                        .btnBlock {
                            width: 2.3rem;
                            text-align: -webkit-right;
                        }

                        .btnBuy {
                            width: 1.65rem;
                        }
                    }

                    .goodsItem:first-child {
                        padding-top: 0.3rem;
                        border-top: 1px solid #E6E6E6;
                    }
                }
            }
        }
    }

    .shareHomeInfo {
        color: #4e4e4e;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;

        .shareItems {
            height: 3.5rem;

            .item {
                width: 31.2%;
                text-align: center;
                font-size: 0.32rem;
                padding: .76rem 0;
            }

            .iconShare {
                width: 1.38rem;
                height: 1.38rem;
                margin-bottom: .2rem;
            }
        }

        .popupBottom {
            line-height: 1.18rem;
            font-size: .39rem;
            border-top: 1px dashed #E2E2E2;
            text-align: center;
        }
    }

    .posterDialog {
        .posterBlock {
            width: 7.5rem;
            height: 8.3rem;
            background-color: #fff;
            margin: 0 auto;
            padding: .25rem .27rem;

            .logo {
                width: 100%;
                height: 4.3rem;

                .iconLogo {
                    width: 100%;
                    height: 100%;
                }
            }

            .qrcodeBlock {
                margin-top: 2rem;

                .qrcode {
                    width: 1.5rem;
                    height: 1.5rem;
                    margin-right: .57rem;
                }

                .iconQrcode {
                    width: 100%;
                    height: 100%;
                }

                .text {
                    width: 4rem;
                    text-align: left;
                }

                .title {
                    color: #4E4E4E;
                    font-size: .39rem;
                }

                .subTitle {
                    color: #9F9F9F;
                    font-size: .32rem;
                }
            }
        }
    }
</style>
